<template>
    <view class="community">
        <view class="modcomuni">
			<navigator url="../invitelist/invitelist" hover-class="none">
				<view class="zhit">
					社区人员统计(人)
				</view>
				<image class="leftimge" src="../../static/img/persons.png"></image>
			</navigator>
            <view class="changcolo"></view>
            <view class="changeilo"></view>
            <view class="cnk">
                <view class="">
                    <view class="nmk">
                        {{rebateDetail.totalInviteAmount}}
                    </view>
                    <view class="chins">
                        累计人数
                    </view>
                </view>
                <view class="fegl"></view>
                <view class="">
                    <view class="nmk">
                        {{rebateDetail.todayInviteAmount}}
                    </view>
                    <view class="chins">
                        今日人数
                    </view>
                </view>
            </view>
            <view class="cnk">
                <view class="">
                    <view class="nmk">
                        {{rebateDetail.weekInviteAmount}}
                    </view>
                    <view class="chins">
                        7日内人数
                    </view>
                </view>
                <view class="fegl"></view>
                <view class="">
                    <view class="nmk">
                        {{rebateDetail.monthInviteAmount}}
                    </view>
                    <view class="chins">
                        30日内人数
                    </view>
                </view>
            </view>
        </view>
        <view class="modcomuni">
			<navigator url="../rebaterecord/rebaterecord" hover-class="none">
				<view class="zhit">
					社区佣金统计(USDT)
				</view>
				<image class="leftimge" src="../../static/img/records.png"></image>
			</navigator>
            <view class="changcolo"></view>
            <view class="changeilo"></view>
            <view class="cnk">
                <view class="">
                    <view class="nmk">
                        {{rebateDetail.totalRebateAmount}}
                    </view>
                    <view class="chins">
                        累计佣金
                    </view>
                </view>
                <view class="fegl"></view>
                <view class="">
                    <view class="nmk">
                        {{rebateDetail.settledRebateAmount}}
                    </view>
                    <view class="chins">
                        已结算佣金
                    </view>
                </view>
            </view>
            <view class="cnk">
                <view class="">
                    <view class="nmk">
                        {{rebateDetail.unSettledRebateAmount}}
                    </view>
                    <view class="chins">
                        未结算佣金
                    </view>
                </view>
                <view class="fegl"></view>
                <view class="">
                    <view class="nmk">
                        {{rebateDetail.subTotalProfit}}
                    </view>
                    <view class="chins">
                        下级总盈利
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    let uinfo;
    import request from "../../untils/request.js";
    export default {
        data() {
            return {
                rebateDetail: {}
            }
        },
        onLoad() {
            uinfo = uni.getStorageSync('userInfo');
            this.getRebateDetail();
        },
        onPullDownRefresh() {
            this.getRebateDetail();
        },
        methods: {
            getRebateDetail() {
                request.postAssets('/assets/rebateRecord/rebateDetail', {
                    userId: uinfo.userId,
                }).then(res => {
					uni.stopPullDownRefresh();
                    if (res.code == '200') {
                        this.rebateDetail = res.data;
                    }
                })
            }
        }
    }
</script>

<style>
    .community {
        width: 100%;
        height: 100%;
        background: url('../../static/img/community.png') no-repeat;
        background-size: 100%;
        padding: 260rpx 0 20px 0;
    }

    .modcomuni {
        width: 710rpx;
        height: 516rpx;
        background: #FFFFFF;
        margin: 0 auto 10px;
        border-radius: 10px;
    }

    .modcomuni .zhit {
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 21px;
        color: #333333;
        text-align: center;
		padding-top: 25px;
    }

    .modcomuni .changcolo {
        width: 38px;
        height: 2px;
        background: #7F6AC3;
        margin: 0 auto;
    }

    .modcomuni .changeilo {
        width: 295px;
        height: 2px;
        background: #EBEBEB;
        margin: 13px auto 0;
    }

    .modcomuni .cnk {
        display: flex;
        justify-content: space-around;
        margin: 24px 0 0 0;
    }

    .modcomuni .cnk .nmk {
        font-size: 20px;
        font-family: Aileron;
        font-weight: bold;
        line-height: 21px;
        color: #333333;
        text-align: center;
        width: 200rpx;
    }

    .modcomuni .cnk .chins {
        font-size: 16px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        line-height: 21px;
        color: #838AA4;
        text-align: center;
        margin: 10px 0 0 0;
    }

    .modcomuni .cnk .fegl {
        width: 1px;
        height: 34px;
        background-color: #EBEBEB;
    }

    .mthre {
        width: 710rpx;
        height: 1306rpx;
        background: #FFFFFF;
        border-radius: 10px;
        margin: 0 auto;
    }

    .mthre .zhit {
        font-size: 20px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        line-height: 21px;
        color: #333333;
        text-align: center;
        padding: 0px 0 0px 0;
    }

    .mthre .changcolo {
        width: 40px;
        height: 8px;
        background: #9BB0FF;
        margin: -5px auto 0;
        border-radius: 10px;
    }

    /* .mthre .mdzcl {
        width: 670rpx;
        height: 8px;
        background: #7F6AC3;
        border-radius: 8px 8px 0px 0px;
        margin: 26px auto 0;
    } */

    .mthre .theader {
        width: 670rpx;
        height: 100rpx;
        background: #7F6AC3;
        margin: 52rpx auto 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 8px 8px 0px 0px;
    }

    .mthre .theader text {
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #FFFFFF;
        display: inline-block;
        width: 80rpx;
        text-align: center;
    }
    
    .mthre .tbodyer {
        width: 670rpx;
        height: 100rpx;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    
    .mthre .tbodyer {
        width: 670rpx;
        height: 100rpx;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .mthre .tbodyer:nth-child(even) {
        background-color: #D9E1FF;
    }
    /* #ifndef APP-PLUS */
    .mthre .heilist{
        margin: 0 20rpx;
        height: 1056rpx;
        overflow: auto;
    }
    /* #endif */
    /* #ifdef APP-PLUS */
    .mthre .heilist{
        margin: 0 20rpx;
        height: 1042rpx;
        overflow: auto;
    }
    /* #endif */
    .mthre .tbodyer text {
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #333333;
        display: inline-block;
        width: 80rpx;
        word-break: break-all;
        text-align: center;
    }
	
	.leftimge {
	    width: 55rpx;
	    height: 55rpx;
		margin-left: 50px;
	}
</style>
